<template>
    <div id="sIndv">
        <div class="uploadtitle" @>
            提交
        </div>
        <div style="padding:0 0 1% 5%;font-size:70%;color:#c0c0c0">提交需知</div>
        <div style="padding:0 0 0% 5%;font-size:80%;color:#484848">
            **提交的文件必须是一个
            <span style="color:red">rar</span>或者<span style="color:red">zip</span>为后缀的压缩包
        </div>
        <div style="padding:0 0 0% 5%;font-size:80%;color:#464646">
            **<span style="font-weight:bolder">重交作业</span>将<span style="color:red">覆盖</span>和<span style="color:red">清除</span>（分数和评价）上个文件
        </div>
        <div style="padding:0 0 0% 5%;font-size:80%;color:#464646">
            **<span style="font-weight:bolder">团队作业</span>由一位成员提交，其他队员将同步其数据。
        </div>
        <div class="uploadBtn" >
            <input style="cursor: pointer;" class="taskUpload" ref="task_up_file" type="file" @change="showNameTask($event)">
            <img  src="../assets/stuUpload.png">
          <div class="reupload" >{{reupload}}</div>
        </div>
        <div class="uploadHistory">
            <img>
            {{showUploadTaskName}}
        </div>
        <div class="current">
            信息
        </div>

        <!--<el-row class="currentTask">
            <el-col :span="4"><span  style="font-size:1px;color:#767676">NO</span><span style="font-weight:bolder;font-size:18px;padding-left:5px">1</span></el-col>
            <el-col :span="8">实验一</el-col>
            <el-col :span="6">
                分数
                <span style="color:red">90</span>
            </el-col>
            <el-col :span="6" style="text-align:center;">重交</el-col>
        </el-row>-->
        <div class="taskInfo">
            <div class="type"style=" border-bottom: 1px solid #eeeeee">
                <div >类型</div>
                <div class="typeName" >{{workType}}</div>
            </div>
            <!--<div class="num" style=" border-bottom: 1px solid #eeeeee">-->
                <!--<div>提交者：</div>-->
                <!--<div class="upload">-->
                    <!--<span>{{studentName}}</span>-->
                <!--</div>-->
            <!--</div>-->
            <div class="num" style=" border-bottom: 1px solid #eeeeee">
                <div>提交时间：</div>
                <div class="upload">
                    <span>{{startTime}}</span>
                    <span style="text-decoration: underline;cursor: pointer;font-size:90%;"></span>
                </div>
            </div>
            <div class="file"style=" border-bottom: 1px solid #eeeeee">
                <div >文件名称：</div>
                <div class="fileName" >{{fileName}}</div>
            </div>
            <div class="score" style=" border-bottom: 1px solid #eeeeee">
                <div>分数：</div>
                <div class="scoreNum">{{stuScore}}</div>
            </div>
            <!--<div class="pingjia" style=" border-bottom: 1px solid #eeeeee" @click.stop="showPl">-->
                <!--<div>老师评价</div>-->
                <!--<div ref="showpl" style="width:90%;overflow:hidden;word-wrap: break-word;">234234234234234234234234234234234234234</div>-->
                <!--<div class="textareaField" style="max-width: 450%;overflow: hidden;height:300%">-->
                    <!---->
                <!--</div>-->
            <!--</div>-->
        </div>
        <!--<div class="history">
            历史
        </div>
        <div class="courses" v-for="(course,index) in courses" >
            <el-row  v-bind:class="{coursesRow:course.selected=true}"  >
                <el-col :span="4" ><div @click="showHistory(index)">1</div></el-col>
                <el-col :span="5" @click="showHistory(index)"><div @click="showHistory(index)">{{course.num}}</div></el-col>
                <el-col :span="15" @click="showHistory(index)"><div @click="showHistory(index)">{{course.name}}</div></el-col>
            </el-row>
           <div ref="item" class="courseHistory" style="display:none;width:100%;">
                    <ul class="historyTask">
                        <li v-for="(tsk,index) in tsks">
                            <span  style="font-size:1px;color:#cfcfcf">NO.</span><span style="font-weight:bolder;font-size:15px;padding-left:0px">{{tsk.num}}</span>
                            <span style="padding-left:5%">{{tsk.name}}</span>
                            <span style="padding-left:15%">
                                分数
                                <span style="color:red;padding-left:2%;">
                                    {{tsk.score}}
                                </span>
                            </span>
                        </li>
                    </ul>
                </div>
        </div>-->
    </div>
</template>
<script>
  import axios from 'axios'
    export default {
         data(){
             return{
                 studentName:"",
                 startTime:"",
                 fileName:"",
                 stuScore:"",
                 workName:"",
                 courseName:"",
                 workType:"",
                 reupload:'提交作业',
                 showUploadTaskName:'',
                 commitFile:"",
                 showPling:false,
                 taskName:"未上交",
                //  task,
                 courses:[
                     {
                         icon:"",
                         num:"001",
                         name:"新媒体实务",
                         selected:true,
                     },
                     {
                         icon:"",
                         num:"002",
                         name:"cuode",
                         selected:false,
                     },
                     {
                         icon:"",
                         num:"003",
                         name:"新媒体实务",
                         selected:true,
                     },
                     {
                         icon:"",
                         num:"004",
                         name:"新媒体实务",
                         selected:true,
                     }
                 ],
                 tsks:[
                     {
                         num:"3",
                         name:"实验三  ",
                         score:"90",
                     },
                     {
                         num:"2",
                         name:"实验二",
                         score:"80",
                     },
                     {
                         num:"1",
                         name:"实验一",
                         score:"70",
                     },
                 ],
             }
         },
      props:[
           'stuMess'
         ],
    watch:{
    'stuMess': function() {
         if(this.stuMess.accessory==""){
            this.studentName= this.stuMess.name;
            this.fileName="未提交";
            this.startTime="未提交";
            this.stuScore="暂无";
            console.log(this.stuMess.isTeam);
         }else{
            this.studentName= this.stuMess.name;
            this.fileName=this.stuMess.accessory.substring(this.stuMess.accessory.lastIndexOf("/")+1,this.stuMess.accessory.length);
            this.startTime=this.stuMess.submitTime
            this.stuScore=this.stuMess.score;
            this.reupload="重新提交";
            }
          this.workType=this.stuMess.workType;
          this.workName = this.stuMess.workName;
          this.courseName = this.stuMess.course;
    }
    },
         methods:{
             commitWork(){
                var _this = this;

                var workZip = new FormData();
               workZip.append('fileName', this.commitFile);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
               workZip.append('workName', this.workName)
               workZip.append('course', this.courseName)
                let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
                if(this.workType=="个人作业"){
                    workZip.append('userID', localStorage.userID)
                    axios.post('/studentWork/submitWork',workZip,config).then(function (res) {
                    console.log(res.data);
                    _this.$message({
                        message:res.data.msg,
                        type:'success'
                    });

                    }).catch(function (err) {
                        console.log(err);
                    });
                }else if(this.workType=="团队作业"){
                    workZip.append('teamName', this.stuMess.teamName)
                    axios.post('/teamWork/submitWork_team',workZip,config).then(function (res) {
                    console.log(res.data);
                    _this.$message({
                        message:res.data.msg,
                        type:'success'
                    });

                    }).catch(function (err) {
                        console.log(err);
                    });
                }
               

             },
             showNameTask(event){
                 if(this.workName==""){
                 this.$message({
                   message:'请选择对应实验',
                   type:'warning'
                 });
               }
                this.commitFile = event.target.files[0];
                this.commitWork();

               var nameArr=this.$refs.task_up_file.value.split('\\');
               var filenameTask=nameArr[nameArr.length-1];
                this.showUploadTaskName=filenameTask;
                console.log(this.showUploadTaskName);
            },
             showPl(){
                 if(this.$refs.showpl.style.display=="none"){
                     this.$refs.showpl.style.display="block";
                     console.log( this.$refs.showpl.style.display)
                 }else{
                     this.$refs.showpl.style.display="none";
                     console.log( this.$refs.showpl.style.display)

                 }
                 /*this.showPling=!this.showPling;
                 console.log( this.showPling)*/
             },
             showHistory(index){
                console.log(this.courses[index].selected,this.courses[index].name,)
                 for( var i =0;i<this.$refs.item.length;i++){
                 }
                 if(this.$refs.item[index].style.display=="none"){
                     this.$refs.item[index].style.display="block";
                     console.log(this.$refs.qaz[index].style)
                 }else{
                     this.$refs.item[index].style.display="none";
                 }
             }
         }
    }
</script>
<style>
    .showCm{
        background:red
    }
    #sIndv .uploadtitle{
       padding:4% 0 3% 5%;
       font-size: 95%
    }
    #sIndv .current{
        border-top: 1px solid #ccc;
        margin:2.5% 0 0 0;
        font-size: 100%;
        padding:2% 0 2% 5%;
    }
    #sIndv .currentTask{
        padding-left: 15px;
        /*background: red;*/
        height: 30px;
        line-height: 45px;
        margin-bottom: 20px;
    }
 .coursesRow{
        /*background: green;*/
    }
#sIndv .courses {
        font-size: 16px;
        padding-left: 15px;
        /*background: red;*/
        /*height: 30px;*/
        line-height: 45px;
        border-bottom: 1px solid #ccc
    }
#sIndv,#sTeam .courses .courseHistory{
    }
#sIndv .historyTask li{
        color: #767676;
        padding-left: 10px;
        font-size: 14px;
        line-height: 25px;
    }
    #sIndv .num span{
        padding:0 1% 0 0%;
    }
    #sIndv .num .upload{
        color:#2d2d2d;
        font-size: 93%;
        width:100%;
        position: absolute;
        text-align: right;
        top:20%;
        right:4%;
    }
     #sIndv .taskInfo{
         padding: 3% 0 0 0%;
         font-size: 93%;
     }
    #sIndv .taskInfo .file,.score,.pingjia,.num,.type{
        color:#767676;
        margin: 0 0 0% 0 ;
        position: relative;
        text-align: left;
        padding:1% 0 1% 5% ;
        font-size: 93%;
    }
    #sIndv .taskInfo .fileName,.scoreNum,.textareaField,.typeName{
        color:#2d2d2d;
        position: absolute;
        text-align: right;
        top:20%;
        right:4%;
        font-size: 93%;
    }

    #sIndv .uploadBtn{
        position: relative;
        padding:3% 0 0% 5% ;
        text-decoration: underline;
        font-weight: normal;
        font-size: 1.3vw
    }
    #sIndv .uploadBtn .reupload{
        position: absolute;
        padding: 0 0 0 0 ;
        top:1.1vw;
        left:4vw;
        text-decoration: underline;
        color:#565656
    }
    #sIndv .taskUpload{
        position: absolute;
        height: 1.5vw;
        width:8vw;
        z-index: 100;
        opacity: 0;
        cursor: pointer;
    }
    #sIndv .uploadBtn img{
        width: 1.8vw;
        height: 1.8vw;
        margin: 0 0 0 0;
    }
    #sIndv .uploadHistory{
        padding:2% 0 0% 5% ;
        font-weight: normal;
        font-size: 75%;
        color:#aeaeae
    }
    #sIndv .uploadHistory img{
        width: 1vw;
        height: 1vw;

    }
</style>
